/**
       * 实现popup的html元素
       */
 var container = document.getElementById('popup')
 var content = document.getElementById('popup-content')
 var closer = document.getElementById('popup-closer')

 /**
  * 在地图容器中创建一个Overlay
  */
 var popup = new ol.Overlay(
   /** @type {olx.OverlayOptions} */
   ({
     //要转换成overlay的HTML元素
     element: container,
     //当前窗口可见
     autoPan: true,
     //Popup放置的位置
     positioning: 'bottom-center',
     //是否应该停止事件传播到地图窗口
     stopEvent: false,
     autoPanAnimation: {
       //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
       duration: 250,
     },
   })
 )
 map.addOverlay(popup)

 /**
  * 添加关闭按钮的单击事件（隐藏popup）
  * @return {boolean} Don't follow the href.
  */
 closer.onclick = function () {
   //未定义popup位置
   popup.setPosition(undefined)
   //失去焦点
   closer.blur()
   return false
 }
 /**
  * 为map添加点击事件监听，渲染弹出popup
  */
 map.on('click', function (evt) {
   //判断当前单击处是否有要素，捕获到要素时弹出popup
   var feature = map.forEachFeatureAtPixel(
     evt.pixel,
     function (feature, layer) {
       return feature
     }
   )
   if (feature) {
     if (popup.getPosition() == undefined) {
       //设置popup的位置
       var position = feature.getGeometry().getCoordinates()
       popup.setPosition(position)
     }
   }
 })
 /**
  * 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
  */
 map.on('pointermove', function (e) {
   var pixel = map.getEventPixel(e.originalEvent)
   var hit = map.hasFeatureAtPixel(pixel)
   map.getTargetElement().style.cursor = hit ? 'pointer' : ''
 })